<template>
    <div class="w-100d user-info" v-bind:style="{backgroundImage: 'url('+ image +')'}">
        <img :src="avatar" class="img-circle" width="48" height="48">
        <h6>{{username}}</h6>
        <drop-link btnClass="user-link a-no-t" :menus="menus">Art Director</drop-link>
    </div>
</template>

<style>
    @import '../../sass/custom/_userinfo.scss';
</style>

<script>
	import DropLink from '../button/DropLink.vue';
	export default {
		name: 'UserInfo',
		data () {
			return {
				menus: [
					{ id: 0, name: 'Profile', link: '#' },
					{ id: 1, name: 'Contacts', link: '#' },
					{ id: 2, name: 'Mailbox', link: '#' },
					{ id: 4, name: '', link: '#', divider: 'divider' },
					{ id: 3, name: 'Login Out', link: '#' }
				]
			};
		},
		props: {
			username: {type: String, default: 'User Name'},
			avatar: {type: String},
			image: {type: String}
		},
		components: {
			DropLink
		}
	};
</script>
